<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <el-dialog class="ba-operate-dialog" :model-value="baTable.form.operate == 'Detail' ? true : false"
        @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">订单详情
            </div>
        </template>

        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'" v-if="!isEmpty(baTable.form.extend!.detail)">
                <el-descriptions  :column="2" border title="用户信息">
       
                    <el-descriptions-item label="用户昵称">
                        {{ baTable.form.extend!.detail.user_id == 0 ? '订阅用户' : baTable.form.extend!.detail.user.nickname }}
                    </el-descriptions-item>
        
                    <el-descriptions-item label="手机号">
                        {{ baTable.form.extend!.detail.user_id == 0 ? '订阅用户' : baTable.form.extend!.detail.user.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="用户类型">
                        {{ baTable.form.extend!.detail.user_id == 0 ? '订阅用户' : baTable.form.extend!.detail.user_type_name }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-divider />
                <el-descriptions  :column="2" border title="订单信息">
                    <el-descriptions-item label="订单编号(主)">
                        {{ baTable.form.extend!.detail.order_no }}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                        {{ baTable.form.extend!.detail.status_name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="实付金额">
                        {{ baTable.form.extend!.detail.pay_price }}
                    </el-descriptions-item>
                    <el-descriptions-item label="优惠券金额">
                        {{ baTable.form.extend!.detail.coupon_id > 0 ? baTable.form.extend!.detail.couponUser.coupon_price : 0 }}
                    </el-descriptions-item>
                    <el-descriptions-item label="实际支付">
                        {{ baTable.form.extend!.detail.pay_price }}
                    </el-descriptions-item>
                    <el-descriptions-item label="下单时间">
                        {{ baTable.form.extend!.detail.create_time }}
                    </el-descriptions-item>
                    <el-descriptions-item label="支付时间">
                        {{ baTable.form.extend!.detail.pay_time }}
                    </el-descriptions-item>
                    <el-descriptions-item label="支付方式">
                        <div v-if=" baTable.form.extend!.detail.pay_type == 1">微信支付</div>
                        <div v-else-if=" baTable.form.extend!.detail.pay_type == 2">支付宝支付</div>
                        <div v-else>其他支付</div>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单内容">
                        {{ baTable.form.extend!.detail.remark }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-scrollbar>
       
    </el-dialog>
</template>
   
   
<script setup lang="ts">
import { inject,ref } from 'vue'
import { isEmpty } from 'lodash-es'
import baTableClass from '/@/utils/baTable'
const baTable = inject('baTable') as baTableClass

</script>
   
<style scoped lang="scss">
:deep(.color-red) {
    color: var(--el-color-danger) !important;
}

.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }

    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}</style>
   